.checkboxGroup {

    &.fixedWidth {

        .checkboxWrapper {
            margin-right: 0;
            margin-bottom: 10px;
            width: 160px;
            vertical-align: top;
        }

        .checkboxContent {

            & + span {
                display: inline-block;
                max-width: 144px;
                vertical-align: top;
            }
        }
    }
    
    .checkboxWrapper {
        margin-right: 22px;

        &:last-child {
            margin-right: 0;
        }
    }
}

.checkboxWrapper {
    position: relative;
    display: inline-block;
    font-size: 12px;
    color: #5b626f;
    cursor: pointer;

    &.disabled {
        cursor: not-allowed;

        .checkboxContent {

            & + span {
                color: #b3c5d3;
            }

            input {
                cursor: not-allowed;
            }

            input:checked + .checkboxInner {
                background-color: #e9f4fe;
                border-color: #d2e4f4;
            }
        }

        .checkboxInner {
            background-color: #e9f4fe;
            border-color: #d2e4f4;

            &:after {
                background-color: #e9f4fe;
                border-color: #afc6ee;
            }
        }
    }
}
.checkboxContent {
    position: relative;
    display: inline-block;
    outline: none;
    line-height: 1;
    white-space: nowrap;
    vertical-align: text-bottom;

    & + span {
        padding: 0 8px;
    }

    input {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);

        &:checked + .checkboxInner {
            background-color: #4e8ef7;
            border-color: #4e8ef7;

            &:after {
                opacity: 1;
                filter: alpha(opacity=1);
            }
        }
    }
}


.checkboxInner {
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #d2e4f4;
    border-radius: 2px;
    background-color: #fff;
    transition: all .3s;
    &.error{
        border-color:red;
    }

    &:after {
        opacity: 0;
        filter: alpha(opacity=0);
        content: '';
        position: absolute;
        left: 4px;
        top: 0px;
        width: 6px;
        height: 10px;
        border: 2px solid #fff;
        border-top: none;
        border-left: none;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}